<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2025-03-06 16:07:32
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-03-20 15:18:22
 * @FilePath: \hbzc-groupmeal-center-web\src\centerViews\businessAnalysis\incomeStatistics\components\addcometypePop.vue
-->
<template>
  <pb-popup v-model="isShow" :title="staticForm.incomeCategoryId ? '编辑收入类型' : '新增收入类型'" @cancelFn="offPopup"
    @confirmFn="onSave" Width="520">
    <div>
      <el-form style="width: 100%" :model="staticForm" ref="staffFormRef" label-width="auto" inline :rules="rules">
        <el-form-item label="类型名称：" prop="incomeCategoryName">
          <pb-input v-model="staticForm.incomeCategoryName" placeholder="请输入类型名称" width="374px" :maxlength="10"
            type="text"></pb-input>
        </el-form-item>
      </el-form>
    </div>
  </pb-popup>
</template>

<script setup lang="ts">
import { addIncomeCategoryApi, editIncomeCategoryApi } from '@/api/incomeStatistics'
import { createMessage } from '@/Public-UIlibrary/pb-message/method';
const loading = ref(false)
const emits = defineEmits(['refresh'])
const isShow = ref(false)
const formOrigin = () => ({
  incomeCategoryName: ""
})
const staticForm = ref(formOrigin() as any)

const rules = reactive({
  incomeCategoryName: [
    {
      required: true,
      message: '请输入类型名称',
      trigger: ["blur"]
    },
  ],
});

const staffFormRef = ref(null as any)
const offPopup = () => {
  staffFormRef.value.resetFields();
  staticForm.value = formOrigin();
}
const onSave = () => {
  staffFormRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      if (staticForm.value.incomeStatisticsId) {
        editFn()
      } else {
        addFn()
      }
    } else {
    }
  })
}

const addFn = () => {
  return new Promise<void>((resolve, reject) => {
    let params = {
      ...staticForm.value
    }
    addIncomeCategoryApi(params).then(res => {
      loading.value = false
      if (res.code == 2000) {
        createMessage({ type: 'success', message: '操作成功' })
        isShow.value = false
        emits('refresh')
      }
    })
  })
}
const editFn = () => {
  return new Promise<void>((resolve, reject) => {
    let params = {
      ...staticForm.value
    }
    editIncomeCategoryApi(params).then(res => {
      loading.value = false
      if (res.code == 2000) {
        createMessage({ type: 'success', message: '操作成功' })
        isShow.value = false
        emits('refresh')
      }
    })
  })
}

const show = (row) => {
  if (row) {
    console.log(row)
    let { incomeCategoryId, incomeCategoryName } = row
    staticForm.value = {
      incomeCategoryId, incomeCategoryName
    }
  }
  isShow.value = true
}

defineExpose({ show })
</script>

<style lang="scss" scoped>
.imgdiv {
  display: flex;
  align-items: center;

  .text {
    padding-left: 8px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }

  .img-container {
    position: relative;
    display: inline-block;
  }

  .delete-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    /* 初始状态隐藏删除按钮 */
  }

  .img-container:hover .delete-btn {
    display: block;
    cursor: pointer;
    /* 鼠标悬停在容器上时显示删除按钮 */
  }

  .dishImgs {
    width: 80px;
    height: 80px;
    margin-left: 15px;
  }
}

.avatar-uploader {
  width: 80px;
  justify-content: center;
  display: flex;
  height: 80px;
  background: rgba(0, 0, 0, 0.04);
}
</style>